<template>
    <view :style="objColor">
      <image
        class="header-image"
        :src="(mixOtherIconList[5] && mixOtherIconList[5].icon)"
        style="width: 100%"
      ></image>
  
      <view
        class="detCon"
      >
        <view class="detTopCon">
          <view class="detTopName">{{ isv2g ? '放电已完成，订单结算中...' : '充电已完成，订单结算中...'}}</view>
          <view class="detTopText">因电桩网络延迟，账单仍在同步获取中，<text class="detTopRed">{{ isv2g ? '不影响二次放电' : '不影响二次充电' }}</text></view>
        </view>
      
        <view class="demarcation">
          <view
            class="orderInfoCon"
            :style="
              'padding-bottom: ' + (orderStatus == 2 ? '150rpx' : '150rpx') + ';'
            "
          >
          
  
  
            <!-- 订单信息 -->
            <view class="infoCon">
              <view class="demMoneyCon">
                <view class="infoTop">
                    <view class="gunName">{{ det.stationName }}</view>
                </view>

                <view class="demMoneyList">
                  <view class="demMoneyTitle">订单编号</view>
                  <view class="totalCon">
                    <text class="order">{{ det.busShowNo }}</text>
                    <text
                      class="copyButton"
                      @tap="copyOrder"
                      :data-busId="det.busShowNo"
                      >复制</text
                    >
                  </view>
                </view>
                <view class="infoList">
                  <view class="infoListTitle">启动时间</view>
                  <view class="infoListVal">{{ det.timeS?det.timeS:'--' }}</view>
                </view>
				<!-- 微信支付分wxppOrder == true -->
                <view class="infoList" v-if="!det.wxppOrder">
                  <view class="infoListTitle">订单冻结金额</view>
                  <view class="infoListVal"
                    ><text>￥{{det.preFrozenAmount?det.preFrozenAmount:'0'}}</text><image class="cardTitleIcon" src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/QuestionMark.png" @tap="BulletFrame()"></image></view
                  >
                </view>
              </view>
            </view>

            <!-- 结算说明 -->
            <view class="infoCon">
              <view class="demMoneyCon">
                <view class="infoTop">
                    <view class="gunName">结算说明</view>
                </view>

                <view class="infoDescribe">
                    <view>1、获取账单后会自动完成结算，结算金额以实际账单为准，多退少补，结算后解冻剩余金额。</view>
                    <view>2、账单结算过程中，<text class="detTopRed">{{isv2g ? '不影响您的二次放电' : '不影响您的二次充电'}}</text>。</view>
                </view>
              </view>
            </view>

             
             <view class="infoCon" @tap="goStopProgramme">
              <view class="demMoneyCon settlementCon">
                <view>
                    <view class="infoTop">
                        <view class="gunName">{{isv2g ? '放电完成后终端仍在运行中？' : '充电完成后终端仍在运行中？'}}</view>
                    </view>

                    <view class="infoDescribe">请点击此处查看完整解决方案。</view>
                </view>
                <image class="settlementImg" src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/back.png" ></image>
              </view>
            </view>
  
           
  
            <view class="orderClothes">
                如有疑问请联系<text class="orderClothesText" @tap="call">客服</text>
            </view>
  
            <!-- <view class="costCon">
              <view class="costTop">
                <view class="costName">费用详情</view>
              </view>
              <view> -->
                <!-- <uni-steps :options="steps" direction="column" :active="2"></uni-steps> -->
                <!-- <orderSteps
                  :options="steps"
                  direction="column"
                  :active="2"
                ></orderSteps> -->
                <!-- <uni-steps :options="[{title:'买家下单',desc:'2018-11-11'},{title:'卖家发货',desc:'2018-11-12'},{title:'买家签收',desc:'2018-11-13'},{title:'交易完成',desc:'2018-11-14'}]" direction="column" :active="2"></uni-steps> -->
                <!-- <van-steps :steps="steps" :active="active" direction="vertical" active-color="#1487FA" desc-class="costDet"></van-steps> -->
              <!-- </view>
            </view> -->
  
            <view class="parkingRate" @tap="clickExplain" v-if="orderStatus == 2">
              <image
                class="img"
                src="https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/infor.png"
              ></image>
              支付说明
            </view>
          </view>
        </view>
      </view>

      <uni-popup ref="showBulletFrame" background-color="#fff" safe-area type="center">
			<view class="BulletFrameCon">
				<view class="bulletTitle">
					说明
				</view>
				<view class="bulletVal">
          {{ isv2g ? '订单冻结金额是放电启动时下发的预支付放电金额，待订单结算后扣除实际费用后，解冻剩余部分金额。其中冻结部分金额暂不支持提现及使用。' : '订单冻结金额是充电启动时下发的预支付充电金额，待订单结算后扣除实际费用后，解冻剩余部分金额。其中冻结部分金额暂不支持提现及使用。' }}
				</view>
				<view class="bulletButton" @tap="showFrame">
					关闭
				</view>
			</view>
		</uni-popup>
      
  
      <view class="order_msg">
        <view
          class="order_btn"
          @tap="goHome"
        >
          <text >前往首页</text>
          
        </view>
      </view>


      <uni-popup  ref="showCustomerPup" type="dialog">
            <uni-popup-dialog  type="info" cancelText="取消" confirmText="呼叫" title="温馨提示"  @confirm="callCustomer"
                @close="onCloseCustomer">
                <view>
                  <view class="info"><view class="infoTitle">联系客服：</view><text class="infoValue">{{ serviceInfo.customerTelephone }}</text></view>
                  <view class="info"><view class="infoTitle">工作时间：</view>{{ serviceInfo.customerServiceTime }}</view>
                </view>
            </uni-popup-dialog>
        </uni-popup>
    </view>
  </template>
  
  <script>
  "use strict";
  import capsule from "../../../components/nav/nav";
import navLod from "../../../components/navLod/navLod";
import orderSteps from "orderSub/components/orderSteps/orderSteps";
import orderCollapseItem from "orderSub/components/orderCollapse/components/uni-collapse-item/uni-collapse-item.vue";
import orderCollapse from "orderSub/components/orderCollapse/components/uni-collapse/uni-collapse.vue";
  // import vanCollapse from '@vant/weapp/collapse/index';
  // import vanCollapseItem from '@vant/weapp/collapse-item/index';
  // import vanSteps from '@vant/weapp/steps/index';
  // import vanTransition from '@vant/weapp/transition/index';
  
  // exports.__esModule = true; // orderSub/pages/orderDetails/orderDetails.ts
  var app = getApp();
  var https_1 = require("./../../../api/https.js");
  var billStatusTimes=null
  var util_1 = require("./../../../utils/util.js");
  export default {
    components: {
      capsule,
      navLod,
      orderSteps,
      orderCollapseItem,
      orderCollapse,
      // vanCollapse,
      // vanCollapseItem,
      // vanSteps,
      // vanTransition
    },
    data() {
      return {
        marketingSwitch:app.globalData.marketingSwitch,
        explain: false,
       
        showPaidTips: true,
        orderStatus: 3,
  
        det: {
          stationName: false,
          pileNumber: false,
          gunName: false,
          billTypeStr: "",
          busBalance: "",
          powerBalance: "",
          serviceBalance: "",
          totalDiscountBalance: "",
          payAccountStr: "",
          memberDiscountBalance: "",
          ruleType: "",
          discountBalance: "",
          deductibleBalance: "",
          cashCouponBalance: 0,
          couponTypeStr: "",
          billStatus: 0,
          billPayLog: [],
          actualBalance: "",
          memberType: 0,
          refundCoupon: false,
          busId: "",
          isSuper: false,
          chargeType: "",
          timeS: "",
          difference: "",
          endReasonStr: false,
          timeE: "",
          plateNo: false,
          sumPower: "",
          endSoc: false,
        },
  
        activeNames: [],
        active: 2,
        steps: [],
  
        guns: [
          {
            value: 0,
            name: "A",
          },
          {
            value: 1,
            name: "B",
          },
          {
            value: 2,
            name: "C",
          },
          {
            value: 3,
            name: "D",
          },
          {
            value: 4,
            name: "E",
          },
          {
            value: 5,
            name: "F",
          },
          {
            value: 6,
            name: "G",
          },
          {
            value: 7,
            name: "H",
          },
          {
            value: 8,
            name: "I",
          },
          {
            value: 9,
            name: "J",
          },
          {
            value: 10,
            name: "K",
          },
          {
            value: 11,
            name: "L",
          },
          {
            value: 12,
            name: "M",
          },
          {
            value: 13,
            name: "N",
          },
          {
            value: 14,
            name: "O",
          },
          {
            value: 15,
            name: "P",
          },
          {
            value: 16,
            name: "Q",
          },
          {
            value: 17,
            name: "R",
          },
          {
            value: 18,
            name: "S",
          },
          {
            value: 19,
            name: "T",
          },
          {
            value: 20,
            name: "U",
          },
          {
            value: 21,
            name: "V",
          },
          {
            value: 22,
            name: "W",
          },
          {
            value: 23,
            name: "X",
          },
          {
            value: 24,
            name: "Y",
          },
          {
            value: 25,
            name: "Z",
          },
        ],
  
        showCustom: "",
        widnowH: uni.getSystemInfoSync().screenHeight,
        bar_Height: uni.getSystemInfoSync().statusBarHeight,

        serviceInfo: {
            customerTelephone: '',
            customerServiceTime: ''
        },
        isv2g: false, // #V2G功能
      };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
      
  
   
      this.getRefundAmount()
      this.orderIds = options.orderId;
      this.getDetails(options.orderId);
      this.getBillDetails(options.orderId)
    
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {
      clearInterval(billStatusTimes)
    },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
      clearInterval(billStatusTimes)
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    onPageScroll: function (e) {
      let height =
        this.widnowH <= 568 ? this.bar_Height + 40 : this.bar_Height + 45;
      if (e.scrollTop > height) {
        this.setData({
          showCustom: true,
        });
      } else {
        this.setData({
          showCustom: false,
        });
      }
    },
    methods: {
      //去评论
      orderTop: function (e) {
        console.log(e, "去评论....");
        uni.navigateTo({
          url: `../orderMsg/orderMsg?busId=${e.currentTarget.dataset.busid}&id=${e.currentTarget.dataset.id}&commentstatus=${e.currentTarget.dataset.commentstatus}`,
        });
      },
      //去支付
      goPay: function (e) {
        if (!this.marketingSwitch) {
        uni.navigateTo({
          url:
            "../orderSettlement/orderSettlement?busId=" +
            e.currentTarget.dataset.busid,
        });
      }else {
              uni.navigateTo({
                  url: `../orderSettlementYxhk/orderSettlement?busId=${e.currentTarget.dataset.busid}`
              });
          }
      },
  
     
      // 获取订单详情
    getDetails: function (id) {
      console.log(id,'订单id')
      var that = this;
      uni.showLoading({
        title: "加载中",
      });
      https_1
        .myBillDetails({
          id: id,
        })
        .then(function (res) {
          if (res.code == 0) {
            that.det = res.data;
            // #V2G功能
            if (that.isV2GOption) {
              that.isv2g = res.data.disCharge ? true : false
            }
            uni.hideLoading();
          }

         
        });
    },


    getBillDetails:function(id){
      var that=this
      console.log('进入')
      billStatusTimes =  setInterval(() => {
        https_1.myBillDetails({
          id:id
        }).then(function (res){
          console.log(res,'进入',id)
          if(res.data.billStatus==10||res.data.billStatus==11||res.data.billStatus==12||res.data.billStatus==13||res.data.billStatus==15){
          uni.hideLoading();
          clearInterval(billStatusTimes)
          if(!that.marketingSwitch) {
						uni.navigateTo({
							url: '/orderSub/pages/orderSettlement/orderSettlement?busId=' + res.data.busId+"&backType=2"
						});
					} else {
						uni.navigateTo({
							url: '/orderSub/pages/orderSettlementYxhk/orderSettlement?busId=' + res.data.busId+"&backType=2"
						});
					}
          // uni.redirectTo({
          //   url:'/orderSub/pages/orderSettlement/orderSettlement?busId='+res.data.busId+"&backType=2"
          // })
          }else if(res.data.billStatus==14||res.data.billStatus==18||res.data.billStatus==17||res.data.billStatus==3||res.data.billStatus==16){
            uni.hideLoading();
            clearInterval(billStatusTimes)
            if (!that.marketingSwitch) {
						uni.redirectTo({
							url: '/orderSub/pages/orderDetails/orderDetails?orderId=' + id
						});
					} else {
						uni.redirectTo({
							url: '/orderSub/pages/orderDetailsYxhk/orderDetailsYxhk?orderId=' + id
						});
					}
            // uni.redirectTo({
            //     url: '/orderSub/pages/orderDetails/orderDetails?orderId='+id
            // });
          }
        })
      }, 15000)
    },
      
  
    
      // 支付说明
      clickExplain: function () {
        this.explain = !this.explain;
      },

  
      showPaidTipsFun: function () {
        this.showPaidTips = false;
      },
  
      // 分转元
      regFenToYuan: function (fen, s) {
        var num = 0;
  
        if (!s) {
          num = (fen / 100).toFixed(4);
        } else {
          num = (fen / 10000).toFixed(4);
        }
  
        return num;
      },
  
      // 复制订单号
      copyOrder: function (e) {
        uni.setClipboardData({
          data: e.currentTarget.dataset.busid,
        });
      },

      BulletFrame(){
        this.$refs.showBulletFrame.open()
      },
      showFrame:function () {
            this.$refs.showBulletFrame.close()
        },

        goStopProgramme(){
          let url = '../stopProgramme/stopProgramme'

          // #V2G功能
          if (this.isV2GOption && this.isv2g) {
            url = url + '?disCharge=true'
          }

          uni.navigateTo({ url });
        },

        //客服电话
        callCustomer: async function () {
          this.$refs.showCustomerPup.close()
          //#ifdef APP-PLUS
            let result = await this.$store.dispatch("requestPermissions",'CALL_PHONE')
            if (result !== 1){
              return
            }else{
              uni.makePhoneCall({
                  phoneNumber: this.serviceInfo.customerTelephone
              });
            }    
          //#endif
          //#ifdef MP-WEIXIN
            uni.makePhoneCall({
                phoneNumber: this.serviceInfo.customerTelephone
            });
          //#endif     
        },
        call: function () {
            this.$refs.showCustomerPup.open()
        },

        onCloseCustomer: function () {
            this.$refs.showCustomerPup.close()
        },

        getRefundAmount: function() {
            var that = this;
            https_1.refundAmount().then(function(res) {
                if (res.code == 0) {
                    that.setData({
                        serviceInfo: res.data
                    });
                }
            });
        },


        goHome: function () {
            uni.switchTab({
                url: '../../../pages/index/index'
            });
        }

        
    },
  };
  </script>
  <style lang="less">
  @import "../../../commin/commin.less";
  page {
    background-color: #f4f6f8;
    height: 100vh;
    padding-bottom: 40rpx;
  }
  .header-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 556rpx;
  }
  .detCon {
    width: 100%;
    position: relative;
  }
  .detName {
    font-size: 34rpx;
    font-weight: bold;
    color: #18181a;
    margin: 15rpx 0 42rpx 32rpx;
  }
  .demarcation {
    margin: 0 10rpx;
    .demCon {
      margin: 10rpx 14rpx;
      background: linear-gradient(0deg, #ffffff, #f4f6f8);
      box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
      border-radius: 0rpx 0rpx 16rpx 16rpx;
      margin-bottom: 20rpx;
      padding-bottom: 10rpx;
      .demTop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1rpx solid #dcdfe6;
        padding: 40rpx 33rpx 32rpx 33rpx;
        .gunName {
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #18181a;
        }
        .status {
          height: 25rpx;
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: var(--textColor);
        }
      }
      .demCenter {
        position: relative;
        // height: 200rpx;
        text-align: center;
        .demNum {
          font-size: 64rpx;
          font-weight: bold;
          color: #fc724c;
          margin: 88rpx 0 43rpx 0;
        }
        .symbol {
          font-size: 40rpx;
        }
        .company{
          font-size: 26rpx;
          color: #909399;
        }
        .demState {
          color: #606266;
          font-size: 28rpx;
          font-weight: 400;
          height: 50rpx;
          line-height: 50rpx;
          image {
            height: 31rpx;
            width: 31rpx;
            vertical-align: text-bottom;
            margin-left: 10rpx;
          }
        }
      
      }
    }
  
    .infoCon {
      background: linear-gradient(0deg, #ffffff, #f4f6f8);
      box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
      border: 2rpx solid #ffffff;
      margin: 16rpx 14rpx;
      border-radius: 16rpx;
      margin-bottom: 20rpx;
      overflow: hidden;
      .demMoneyTitle {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #606266;
      }
      .demMoneyVal {
        font-size: 28rpx;
        font-weight: 500;
        color: #fc724c;
      }
      .demMoneyList {
        padding: 25rpx 31rpx 20rpx 31rpx;
        line-height: 34rpx;
        display: flex;
        justify-content: space-between;
        .totalCon {
          text-align: right;
  
          .totalDetailed {
            margin-top: 20rpx;
            font-size: 26rpx;
            font-weight: 400;
            color: #909399;
            line-height: 34rpx;
            opacity: 0.9;
          }
          .order {
            font-size: 30rpx;
            font-weight: 500;
            color: #303133;
          }
          .copyButton {
            font-size: 28rpx;
            font-weight: 400;
            color: var(--textColor);
            display: inline-block;
            border-left: 1px solid #909399;
            padding: 0 0 0 20rpx;
            margin-left: 20rpx;
          }
        }
      }
      .infoTop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 39rpx 32rpx 24rpx 34rpx;
        .gunName {
          font-size: 34rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #18181a;
        }
        .status {
          height: 25rpx;
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: var(--textColor);
          display: inline-block;
        }
      }
      .infoTimeline {
        text-align: center;
        display: flex;
        justify-content: space-between;
        padding: 42rpx 32rpx 0 32rpx;
        .infoTimeCon {
          display: inline-block;
          width: auto;
          text-align: left;
        }
        .infoTimeData {
          font-size: 28rpx;
          color: #606266;
          margin: 0 0 15rpx 0;
        }
        .infoTime {
          font-weight: bold;
          color: #303133;
          font-size: 34rpx;
          margin-top: 15rpx;
          margin-right: 10rpx;
        }
  
        .processCon {
          border: 1px solid #909399;
          border-radius: 24px;
          width: 160rpx;
          display: inline-block;
          font-size: 28rpx;
          font-weight: 500;
          color: #606266;
          position: relative;
          height: 48rpx;
          line-height: 48rpx;
          margin-top: 15rpx;
          &::after {
            content: "";
            border-top: 1px solid #909399;
            position: absolute;
            top: 1;
            width: 40rpx;
            height: 1rpx;
            left: -40rpx;
            top: 24rpx;
          }
          &::before {
            content: "";
            border-top: 1px solid #909399;
            position: absolute;
            top: 1;
            width: 40rpx;
            height: 1rpx;
            right: -40rpx;
            top: 24rpx;
          }
        }
        .processReason {
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #606266;
          margin-top: 10rpx;
        }
      }
      .infoList {
        display: flex;
        justify-content: space-between;
        padding: 20rpx 34rpx;
        .infoListTitle {
          font-size: 28rpx;
          font-weight: 400;
          color: #606266;
        }
        .infoListVal {
          font-size: 28rpx;
          font-weight: 500;
          color: #303133;
          .cardTitleIcon{
			width: 26rpx;
			height: 26rpx;

            margin-left: 20rpx;
		}
        }
      }
    }
  
    .costCon {
      background: linear-gradient(0deg, #ffffff, #f4f6f8);
      box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
      border: 2rpx solid #ffffff;
      margin: 10rpx 10rpx;
      border-radius: 16rpx;
      margin-bottom: 20rpx;
      overflow: hidden;
      .van-steps {
        background: none;
      }
      .costTop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1rpx solid #dcdfe6;
        padding: 40rpx 33rpx 32rpx 33rpx;
        .costName {
          font-size: 34rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #18181a;
        }
      }
      .costDet {
        color: #606266;
        font-size: 26rpx;
        margin: 20rpx 20rpx;
      }
    }
  
    .demMoneyCon {
      > view {
        border: none !important;
        box-shadow: none;
      }
      > text {
        border: none !important;
        box-shadow: none;
      }
  
      padding: 10rpx 0 10rpx 0;
      .demMoneyTitle {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #606266;
      }
      .demMoneyVal {
        font-size: 28rpx;
        font-weight: 500;
        color: #fc724c;
      }
      .demMoneyList {
        padding: 25rpx 31rpx 20rpx 31rpx;
        line-height: 34rpx;
        display: flex;
        justify-content: space-between;
        .totalCon {
          text-align: right;
  
          .totalDetailed {
            margin-top: 20rpx;
            font-size: 26rpx;
            font-weight: 400;
            color: #909399;
            line-height: 34rpx;
            opacity: 0.9;
          }
          .order {
            font-size: 30rpx;
            font-weight: 500;
            color: #303133;
          }
          .copyButton {
            font-size: 28rpx;
            font-weight: 400;
            color: var(--textColor);
            display: inline-block;
            border-left: 1px solid #909399;
            padding: 0 0 0 20rpx;
            margin-left: 20rpx;
          }
        }
      }
      .demMoneyMore {
        background: #f5f7fa;
        padding: 40rpx 24rpx 10rpx 24rpx;
        margin: 0 32rpx 32rpx 32rpx;
        .MoneyMoreList {
          display: flex;
          justify-content: space-between;
          margin-bottom: 32rpx;
          .MoneyMoreVal {
            color: #606266;
          }
        }
      }
    }
    .van-cell:after {
      display: none !important;
    }
    .van-collapse-item__content {
      padding-top: 0px;
    }
  }
  
  .refundTipsCon {
    width: 100%;
    background: #595c69;
    opacity: 0.6;
    height: 80rpx;
    line-height: 80rpx;
    color: #ffffff;
    position: fixed;
    bottom: 0;
    font-size: 28rpx;
    font-weight: 500;
    image {
      height: 32rpx;
      width: 32rpx;
      vertical-align: middle;
      margin: 0 20rpx;
    }
  }
  .refundCon {
    width: 100%;
    background: #595c69;
    opacity: 0.6;
    height: 80rpx;
    line-height: 80rpx;
    color: #ffffff;
    position: fixed;
    bottom: 130rpx;
    font-size: 28rpx;
    font-weight: 500;
    image {
      height: 32rpx;
      width: 32rpx;
      vertical-align: middle;
      margin: 0 20rpx;
    }
  }
  .explainTipsCon {
    z-index: 2;
    display: inline;
    width: 702rpx;
    background: #303133;
    opacity: 0.8;
    padding: 20rpx 0;
    color: #ffffff;
    position: fixed;
    bottom: 150rpx;
    font-size: 28rpx;
    font-weight: 500;
    margin: 0 24rpx;
    border-radius: 10rpx;
  
    .explainTipsImg {
      text-align: right;
      image {
        height: 32rpx;
        width: 32rpx;
        vertical-align: middle;
        margin: 0 20rpx;
      }
    }
    .explainTipsText {
      margin: 33rpx;
      font-size: 26rpx;
      letter-spacing: 2rpx;
      line-height: 42rpx;
    }
  }
  
  .parkingRate {
    color: #606266;
    font-size: 24rpx;
    padding: 5rpx 40rpx 22rpx 40rpx;
    .img {
      width: 25rpx;
      height: 25rpx;
      vertical-align: middle;
      margin-right: 15rpx;
    }
  }
  
  .paymentCon {
    height: 120rpx;
    line-height: 120rpx;
    width: 100%;
    position: fixed;
    bottom: 0rpx;
    background: linear-gradient(0deg, #ffffff, #f4f6f8);
    border: 2px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0px -25px 67px 0px rgba(177, 182, 190, 0.2);
    text-align: center;
    z-index: 999;
    view {
      height: 88rpx;
      background: var(--btnColor);
      box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
      border-radius: 44rpx;
      text-align: center;
      line-height: 88rpx;
      font-weight: bold;
      color: #ffffff;
      font-size: 30rpx;
      display: inline-block;
      width: 680rpx;
    }
  }
  
  .money {
    color: #606266;
    font-size: 26rpx;
    text-align: right;
    font-weight: 500;
  }
  .tc {
    font-size: 34rpx;
    font-weight: bold;
  }
  .tc1 {
    font-size: 28rpx;
    font-weight: bold;
  }
  
  .paidInCon{
    text-align: center;
    display: flex;
    justify-content: space-between;
    padding: 0rpx 32rpx 0 32rpx;
  }

  .BulletFrameCon{
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		font-family: PingFang SC;
		.bulletTitle{
			padding:45rpx 0rpx 40rpx 0rpx;
			text-align: center;
			font-size: 34rpx;
			font-weight: bold;
			color: #303133;
		}
		.bulletVal{
			font-size: 30rpx;
			font-weight: 500;
			color: #303133;
			line-height: 45rpx;
			padding: 0 35rpx;
		}
		.bulletButton{
			margin-top: 86rpx;
			text-align: center;
			border-top: 1rpx solid #DCDFE6;
			padding: 40rpx 0;
			font-weight: bold;
			color: var(--textColor);
			font-size: 30rpx;
		}
	}

    .detTopCon{
    margin: 0rpx 32rpx;
    color: #FFFFFF;
    font-weight: 400;
    font-weight: 400;
    }

    .detTopName{
    font-size: 36rpx;
    padding-top: 64rpx;
    
    }
    .detTopText{
    font-size: 24rpx;
    margin: 24rpx 0 41rpx 0;
    }
    .detTopRed{
        color:#FC724C
    }
    .infoDescribe{
        font-size: 24rpx;
        font-weight: 400;
        color: #606266;
        padding: 0 32rpx 32rpx 32rpx ;
        line-height: 40rpx;
    }
    .settlementCon{
        display: flex;
        justify-content: space-between;
        align-items: center;
        
    }
    .settlementImg{
        width: 13rpx;
        height: 25rpx;
        margin-right: 29rpx;
    }

    .orderClothes{
        font-weight: 400;
        color: #606266;
        font-size: 24rpx;
        text-align: center;
        margin: 40rpx 0;
        .orderClothesText{
            color: var(--textColor);
        }
        }

        .info{
    .fontsize(30rpx);
    .lineheight(70rpx);
  font-family: PingFang SC;
  color: @text-color1;
  display: block;
  font-size: 30rpx;
  .infoTitle{
    display: inline-block;
    width: 5em;
    text-align: right;
  }
  .infoValue{
    color: @blue;
  }
  }

  .order_msg{
    width: 100%;
    background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
    border: 2px solid rgba(255,255,255,0.55);
    box-shadow: 0px -25px 67px 0px rgba(177,182,190,0.2);
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 22rpx 0;
    display: flex;
    align-items: center;
    justify-content:center;
    .order_btn{
        width: 686rpx;
        height: 88rpx;
        line-height:88rpx;
        background: var(--btnColor);
        border-radius: 44rpx;
        text-align: center;
        >text{
            height: 28rpx;
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #FFFFFF;
        }
    }

}
  </style>
  